<template>
	<div class="wrapper">
		<v-head></v-head>
		<div class="content_myfront">
			<el-container class="div_content">
				<router-view></router-view>
			</el-container>
		</div>
		<el-footer class="div_footer">
			<div class="footerInfo">
				<div class="titleLink">
					<a>技术分享 </a>|
					<a>生活感悟 </a>|
					<a>图片素材 </a>|
					<a>站长工具 </a>|
					<a>关于作者 </a>
				</div>
				<div class="CopyRightStyle">网站内容如有侵害您的权益,请发送给作者lvchengjuntime@163.com ,作者将进行删除。CopyRight © 自由的个人博客 
				<a href="http://beian.miit.gov.cn/">鲁ICP备19024360号-1</a></div>
			</div>
		</el-footer>
	</div>
</template>

<script>
	import vHead from './Header.vue';
	import vTags from './Tags.vue';
	import bus from './bus';
	export default {
		data() {
			return {
				tagsList: [],
				collapse: false
			}
		},
		components: {
			vHead,
			vTags
		},
		created() {
			bus.$on('collapse', msg => {
				this.collapse = msg;
			})

			// 只有在标签页列表里的页面才使用keep-alive，即关闭标签之后就不保存到内存中了。
			bus.$on('tags', msg => {
				let arr = [];
				for (let i = 0, len = msg.length; i < len; i++) {
					msg[i].name && arr.push(msg[i].name);
				}
				this.tagsList = arr;
			})
		}
	}
</script>
<style>
	.div_content {
		width: 100%;
		height: 100%;
		padding: 0 10% 10px 10%;
		/* overflow-y: scroll; */
		/* -webkit-box-sizing: border-box; */
		/* box-sizing: border-box; */
	}

	.content_myfront {
		width: 100%;
		max-height: 82%;
		padding: 0px;
		overflow-y: scroll;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.div_footer {
		font-size: 10pt;
		height:100%;
		background-color: #242F42;
		color: #AAAAAA;
		text-align: center;
		vertical-align: middle;

    width: 100%;
    height:100px;   /* footer的高度一定要是固定值*/ 
    position:absolute;
    bottom:0px;
    left:0px;
    background: #333;
	}
	.footerInfo{
		padding:10px;
	}
	
	
	/*效果四：上下左右移动 修改translate(x轴,y轴)*/
	.el-card {
		transition: All 0.4s ease-in-out;
		-webkit-transition: All 0.4s ease-in-out;
		-moz-transition: All 0.4s ease-in-out;
		-o-transition: All 0.4s ease-in-out;
	}
	
	.el-card:hover {
		box-shadow: 2px 5px 6px #AAAAAA;
		/* 	transform: scale(0.2);
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05); */
	}
</style>
